<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>冰岛野生进口即食海参分享组</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<script src="jquery-3.3.1.js"></script>
		<script src="js/lib/jquery.cookie.js"></script>
		<script src="js/details.js"></script>
		<style type="text/css">
			/*侧边栏*/
			.scroll{
				width: 36px;
				position:fixed;
				top: 0;
				right: 0;
				bottom: 0;
				background: #666666;
				
			}
			.scroll ul li{
				font-size: 12px;
				color: #EEEEEE;
				width: 20px;
				text-align: center;
				margin: 50px auto;
				line-height: 20px;
			}
			.scroll ul li:hover{
				cursor: pointer;
			}
			.scroll ul li:before{
				content: "";
				display: block;
				width: 20px;
				border: 1px solid #EEEEEE;
				margin-bottom: 50px;
			}
			.scroll ul li ul li:before{
				content: "";
				width: 0px;
				border: none;
			}
			.scroll ul li ul li img{
				position: relative;
				left: -130px;
				top: -155px;
				display: none;
			}
			.scroll ul li:hover img{
				display: block;
			}
			.scroll ul li i{
				display:inline-block;
				width: 15px;
				height:20px;
				background: red;
				border: 1px solid #FF0000;
				border-radius:15px/20px;
				align-content: center;
				line-height: 17px;
			}
			/*顶部导航*/
			.header_top_box{
				font-size: 12px;
			}
			.header_top_box span{
				font-size: 12px;
			}
			.header_top_box a{
				font-size: 12px;
				margin-left:990px;
			}
			.header_top_box a dl dt,dd{
				height: 30px;
				line-height: 30px;
			}
			.header_top_box ul li{
				font-size: 12px;
			}
			.header_top_box input{
				height: 25px;
				line-height: 36px;
				text-align: center;
				font-size: 12px;
				align-self: center;
				background: #fff;
				border: none;
				/*vertical-align: middle;*/
			}
/*2*/			
			.header_center {
				height: 200px;
			}
			.header_center .w{
				height: 200px;
			}
			.header_center span{
				/*margin-left: 75px;*/
			}
			.header_center .w span a{
				font-size: 12px;
			}
			.header_center .w input{
				height: 40px;
				width: 500px;
				position: relative;
				top: 50px;
				left: 246px;
				border:3px solid red;
				border-radius: 5px;
			}
			.header_center .w #search{
				height: 40px;
				width: 100px;
				background: red;
				position: relative;
				left: 967px;
				top: 10px;
				border-radius: 5px;
				color: #FFFFFF;
				text-align: center;
				line-height:1px;
				font-size: 20px;
				cursor: pointer;
			}
			.header_center .w #shopping_car{
				height: 40px;
				width: 130px;
				background: #fff;
				border: 1px solid #999999;
				position: relative;
				left: 1090px;
				top: -30px;
				
			}
			.header_center .w #shopping_car span{
				display: inline-block;
				height: 40px;
				width: 120px;
				font-size: 14px;
				color: #999999;
				line-height: 40px;
				position: relative;
				left: 20px;
				top: -22px;
				cursor: pointer;
			}
			.header_center .w #shopping_car span a{
				font-size: 14px;
			}
			.header_center .w #shopping_car img{
				display: inline-block;
				width: 25px;
				height: 20px;
				position: relative;
				top: 8px;
			}
			.header_center .w #shopping_car span:hover{
				color: red;
			}
			.header_center .w ul{
				position: relative;
				left: 475px;
				top: -27px;
			}
			.header_center .w ul li{
				display: inline-block;
				float: left;
				font-size: 12px;
				color: #999999;
				margin-right: 10px;
				cursor: pointer;
			}
			.header_center .w ul li:hover{
				color: red;
			}
			.header_center .w dl{
				height: 36px;
				
			}
			.header_center .w dl dt{
				width: 220px;
				height: 36px;
				background:red;
				font-size: 14px;
				cursor: pointer;
				position: relative;
				top: 8px;
				left: 0px;
				text-align: center;
				line-height: 6px;
				color: #fff;
			}
			.header_center .w dl dd:hover{
				color: red;
			}
			.header_center .w dl dd{
				font-size: 12px;
				color: #999999;
				cursor: pointer;
				float: left;
				position: relative;
				left: 270px;
				top:-25px;
				margin-right: 90px;
			}
			.header_center .w dl #tv img{
				height: 15px;
				width: 25px;
				position: relative;
				top: 7px;
			}
			
			.center{
				width: 100%;
				position: relative;		
				overflow: hidden;
			}
			.center .w{
				width: 1200px;
				margin: 0 auto;	
			}	
			.center .w p{
				border-bottom: 1px solid #EEEEEE;
				margin-bottom: 30px;
			}
			.center .w p span a{
				font-size: 12px;
				height: 40px;
				line-height: 40px;
				color: #999999;
				cursor: pointer;
			}
			.center .w p span a:hover{
				color: red;
			}
			.center .w ul{
				width: 94px;
				height: 392px;
				float: left;
				/*background: pink;*/
			}
			.center .w ul li{
				width: 90px;
				height: 90px;
				margin: 0 auto;
			}
			.center .w ul li img{
				width: 90px;
				height: 90px;
				border: 2px solid #999999;
			}
			.center .w ul li img:hover{
				border-color: red;
			}
			.center .w #up{
				width: 94px;
				cursor: pointer;
				
			}
			.center .w #down{
				width: 94px;
				position: relative;
				top: 392px;
				cursor: pointer;
			}
			.center .w #big_box{
				width: 380px;
				height:380px;
				border: 1px solid #CCCCCC;
				margin-left: 120px;
				float: left;
				margin-left: 20px;
				margin-right: 15px;
				position: relative;
			}
			.center .w #big_box img{
				width: 378px;
				height: 378px;
			}
			.center .w #big_box #inner_box{
				width: 190px;
				height:190px;
				background:#FFFFFF;
				position: absolute;
				opacity: 0.2;
				background:cornflowerblue;
				display: none;
				cursor: all-scroll;
				
			}
			.center .w #big_box_max{
				width: 300px;
				height: 300px;
				border: 1px solid #CCCCCC;
			
				display: none;
				position: absolute;
				left:46%;
				overflow: hidden;
				z-index: 999;
			}
			.center .w #big_box_max img{
				width: 560px;
				height: 560px;
				position: absolute;
				display: block;
			}
			.center .w #info{
				width: 438px;
				height: 314px;
				
				display: inline-block;
			}
			.center .w #info p{
				/*display: inline-block;*/
				padding-bottom: 10px;
				border-bottom: 1px dashed #CCCCCC;
				margin-bottom: 0;
			}
			.center .w #info span{
				font-size: 12px;
				display: inline-block;
				padding: 7px 0;
			}
			.center .w #info #middle{
				width: 438px;
				height:90px;
				background:#EEEEEE;
				margin-bottom: 40px;
			}
			.center .w #info #middle span i{
				color: red;
				font-size: 18px;
				font-weight: bold;
			}
			.center .w #info #middle span b{
				display: inline-block;
				width: 30px;
				height: 15px;
				background: red;
				color: #fff;
				text-align: center;
				margin: 0 5px;
			}
			.center .w #info em{
				font-size: 12px;
			}
			.center .w #info input{
				background: #FFFFFF;
				border: none;
				text-align: center;
				border: 1px solid #CCCCCC;
			}
			.center .w #info #info_button{
				margin: 12px 0;
				
			}
			.center .w #info #info_button a{
				display: inline-block;
				width: 30px;
				height: 31px;
				background: #CCCCCC;
				font-size: 30px;
				text-align: center;
				vertical-align: middle;
				line-height: 30px;
			}
			.center .w #info #info_button a:hover{
				color: red;
			}
			.center .w #info #info_button input{
				width: 60px;
				height: 30px;
				position: relative;
				border: 1px solid #CCCCCC;
				
			}
			.center .w #info #info_button i{
				font-size: 12px;
				margin-left: 20px;
			}
			.center .w #info #choose a{
				display: inline-block;
				width: 92px;
				height: 30px;
				color: #FFFFFF;
				background: red;
				text-align: center;
				line-height: 30px;
				margin-right: 20px;
			}
			.center .w #info #choose a:first-child{
				background: green;
			}
			.center .w #Qr_code{
				width: 200px;
				height: 265px;
				display: inline-block;
				position: relative;
				top: -45px;
				left: 45px;
				padding: 10px;
				border: 1px solid #CCCCCC;
			}
			.center .w #Qr_code p{
				border: none;
				text-align: center;
				line-height: 28px;
				height: 28px;
				margin-bottom: 10px;
				font-size: 18px;
			}
			.center .w #Qr_code span{
				font-size: 12px;
				position: relative;
				left: 13px;
			}
			.center .w #more{
				width: 200px;
				height: 32px;
				background:#EEEEEE;
				display: inline-block;
				text-align: center;
				line-height: 32px;
				color: #000000;
				position: relative;
				left: 488px;
				top: -30px;
			}
			.center .w #more a:hover{
				color: red;
			}
			.center .w #share{
				width: 380px;
				height: 30px;
			
				position: relative;
				top: 50px;
				left: 113px;
			}
			.center .w #share span{
				font-size: 12px;
				float: left;
				position: relative;
				top:-30px ;
				left: -90px;
			}
			.center .w #share a img{
				display: inline-block;
				position: relative;
				top:-30px ;
				left: 160px;
			}
			.center .w #tab{
				width: 1200px;
				margin-top: 70px;
			}
			.center .w #tab #left_top{
				width: 222px;
				height: 580px;
				/*background: pink;*/
				border: 1px #CCCCCC solid;
				border-top-color: red;
				border-top-width: 2px;
			}
			.center .w #tab #left_top h3{
				width: 220px;
				height: 36px;
				background: #EEEEEE;
				margin: 0 auto;
				line-height: 36px;
				font-size: 14px;
				font-weight: bold;
				padding-left: 5px;
			
			}
			.center .w #tab #left_top ul{
				width: 220px;
				height: 540px;
				/*background: pink;*/
				overflow: hidden;
				overflow-y: scroll;
			}
			/*滚动条*/
			.center .w #tab #left_top ul::-webkit-scrollbar-track{
				/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
				background-color: #f5f5f5;
			}
			.center .w #tab #left_top ul::-webkit-scrollbar{
				width: 4px;
				background-color: #FFFFFF;
			}
			
			.center .w #tab #left_top ul::-webkit-scrollbar-thumb{
				background-color: #CCCCCC;
			}
			/**/
			
			.center .w #tab #left_top ul li{
				width: 190px;
				height: 176px;
				border-bottom: 1px dashed #999999;
				margin-top: 20px;
			}
			.center .w #tab #left_top ul li a img{
				width: 85px;
				height: 85px;
				margin: 0 auto;
				border:none;
			}
			.center .w #tab #left_top ul li a{
				font-size: 12px;
				
			}
			.center .w #tab #left_top ul li a span{
				display: inline-block;
				margin-top: 20px;
				margin-left: 20px;
			}
			.center .w #tab #left_top ul li a span:hover{
				color: red;
			}
			.center .w #tab #left_top ul li a i{
				font-weight: bold;
				display: inline-block;
				color: red;
				margin-top: 20px;
				margin-left: 70px;
			}
			
			
			
			
			
			.center .w #tab #left_bottom{
				width: 222px;
				height: 580px;
				/*background: pink;*/
				border: 1px #CCCCCC solid;
				border-top-color: red;
				border-top-width: 2px;
				margin-top: 20px;
				display: inline-block;
				float: left;
				
			}
			.center .w #tab #left_bottom h3{
				width: 220px;
				height: 36px;
				background: #EEEEEE;
				margin: 0 auto;
				line-height: 36px;
				font-size: 14px;
				font-weight: bold;
				padding-left: 5px;
			
			}
			.center .w #tab #left_bottom ul{
				width: 220px;
				height: 540px;
				overflow: hidden;
				overflow-y: scroll;
			}
			/*滚动条*/
			.center .w #tab #left_bottom ul::-webkit-scrollbar-track{
				/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
				background-color: #f5f5f5;
			}
			.center .w #tab #left_bottom ul::-webkit-scrollbar{
				width: 4px;
				background-color: #FFFFFF;
			}
			
			.center .w #tab #left_bottom ul::-webkit-scrollbar-thumb{
				background-color: #CCCCCC;
			}
			/**/
			
			.center .w #tab #left_bottom ul li{
				width: 190px;
				height: 79px;
				border-bottom: 1px dashed #999999;
				margin-top: 20px;
			}
			.center .w #tab #left_bottom ul li a img{
				width: 50px;
				height: 50px;
				display: inline-block;
				border: none;
			}
			.center .w #tab #left_bottom ul li a{
				font-size: 12px;
				
			}
			.center .w #tab #left_bottom ul li a span{
				display: inline-block;
				width: 136px;
				position: relative;
				top: -25px;
			}
			.center .w #tab #left_bottom ul li a span:hover{
				color: red;
			}
			
			/*tab栏*/
			.center .w #tab #right_tab{
				/*background: pink;*/
				width: 960px;
				float: right;
				position: relative;
				top: -580px;
			}
	        .center .w #tab #right_tab .tab{
	          	border-bottom: 1px solid #DDDDDD;
	            height:40px;
	            width:960px;
	            margin-bottom: 35px;
	        }
	        .center .w #tab #right_tab .tab .tab-item.active{
	        	border: 1px solid #DDDDDD;
	        	border-bottom-color:#FFFFFF ;
	        	border-top-color: red;
	        	border-top-width: 2px;
	        }
	        .center .w #tab #right_tab .tab li{
	        	font-size: 12px;
	        	font-weight: bold;
	            position:relative;
	            float:left;
	            width:80px;
	            height:40px;
	            line-height:40px;
	            text-align:center;
	            cursor:pointer;
	            border-top:4px solid #fff;
	        }
	        .center .w #tab #right_tab .tab li:nth-child(3){
	         	width:122px ;
	         }
	        .center .w #tab #right_tab .tab span{
	            position:absolute;
	            right:0;
	            top:10px;
	            background:#ddd;
	            width:1px;
	            height:14px;
	            overflow:hidden;
	        }
	        .center .w #tab #right_tab .products{
	            width: 960px;
	           
	        }
	        .center .w #tab #right_tab .products .main{
	            float:left;
	            display:none;
	        }
	        .center .w #tab #right_tab .products .main:nth-child(3) img:nth-child(5){
	        	margin-left: 40px;
	        }
	        .center .w #tab #right_tab .products .main p{
	        	border-bottom: none;
	        }
	        .center .w #tab #right_tab .products .main p a{
	        	margin-left: 80px;
	        	border-bottom:1px solid #000000;
	        }
	        .center .w #tab #right_tab .products .main:nth-child(1) img{
	        	margin-left: 20px;
	        	margin-bottom: -550px;
	        }
	        .center .w #tab #right_tab .products .main:nth-child(2) img{
				width: 960px;
	        	margin-bottom: -100px;
	        }
	         .center .w #tab #right_tab .products .main:nth-child(3) img:last-child{
	        	margin-bottom: -550px;
	        }
	        .center .w #tab #right_tab .products .main:nth-child(4) img{
	        	margin-bottom: 250px;
	        }
	        .center .w #tab #right_tab .products .main.selected{
	            display:block;
	        }
	        .center .w #tab #right_tab .tab li.active{
	            border-color:red;
	            border-bottom:0;
	        }
	        
	        /*后面三部分补充*/
			.footer_add .footer_add_body #left dl dd:nth-child(4){
				position: relative;
				top: -20px;
			}
			.footer_add .footer_add_body #right{
				margin-left: 10px;
			}
			.footer_add .footer_add_body #right dl dd:nth-child(4){
				position: relative;
				top: -20px;
			}
			.footer_add .footer_add_body #center dl{
				top:-40px;
			}
			.footer_add .footer_add_body dl img{
				width: 80px;
				height: 80px;
			}
			
			.helpLink .helpLink_body #left dl dt b{
				font-size: 12px;
			}
		</style>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="header_top">
			<div class="header_top_box">
				<span>欢迎来到风尚购物</span>
					<a href="login.html">我的风尚
					<dl>
						<dt>我的订单</dt>
						<dd>我的收藏</dd>
					</dl>
					|  </a>
				<ul>
					<li>4001-677-077</li>  |
					<li>客服中心</li>
				</ul>
			</div>
		</div>
		<div class="header_center">
			<div class="w">
				<span><a href="login.html">登录</a><a href="register.html">注册</a></span>
				<a href="index.html"><img src="imgs/1 (1).png" class="img1"/></a>
				<input placeholder="请输入商品关键词或者货号"/>
				<div id="search">搜索</div>
				<div id="shopping_car"><img src="imgs/shopping_car.png"/><span><a href="shopping_car.html">我的购物车  ></a></span></div>
				<ul>
					<li>鞋子</li>
					<li>薇依床品</li>
					<li>空气炸锅</li>
					<li>零食</li>
					<li>酒</li>
					<li>羽绒服</li>
					<li>牛肉</li>
				</ul>
				<dl>
					<dt>全部商品分类  \/</dt>
					<dd>首页</dd>
					<dd id="tv"><img src="imgs/TV.png"/>电视直播</dd>
					<dd>热卖榜</dd>
					<dd>风尚慧</dd>
					<dd>品牌店中店</dd>
				</dl>
			</div>
		</div>
		
		<div class="center">
			<div class="w">
				<p><span><a href="index.html">首页</a></span>><span><a href="#">所有类别</a></span>><span><a href="#">食品健康</a></span>><span><a href="#">营养产品</a></span>><span><a href="details.html">冰岛野生进口即食海参分享组</a></span></p>
				<img id="up" src="imgs/xbSmallup.gif"/>
				<img id="down" src="imgs/xbSmalldown.gif"/>
				<ul id="small_img">
					<li><a href="#"></a></li>
				</ul>
				<div id="big_box">
					<!--imgs/rebo_right1.jpeg-->
					<img src="imgs/rebo_right1.jpeg"/>
					<div id="inner_box">
						
					</div>
				</div>
				<div id="big_box_max">
					<img src="imgs/3166711.jpg"/>
				</div>
				<div id="info">
					<p></p>
					<span>商品货号：<u>316671</u></span>
					<div id="middle">
						<span>风尚价 ：￥<i>499.00</i></span><br />
						<span>促销信息 ：<b>买赠</b><em>20袋鲍汁</em></span>
					</div>
					<em>送至：</em><input disabled="disabled" value="湖南省长沙市岳麓区"/>
					<div id="info_button">
						<a href="#" id="minus">-</a><input id="info_button_num" value="1" /><a href="#" id="plus">+</a><i>库存状况：有库存</i>
					</div>
					<div id="choose">
						<a href="" title="立即购买">立即购买</a><a href="shopping_car.html" title="加入购物车" class="shoping_car_btn">加入购物车</a>
					</div>
				</div>
				<div id="Qr_code">
					<p>手机扫码订购</p>
					<img src="imgs/download.jpg"/>
					<span>银联支付/支付宝/微信支付</span>
				</div>
				<div id="more">
					<a href="http://www.fstvgo.com/Goods/TV.aspx">查看以往电视商品</a>
				</div>
				<div id="share">
					<span>分享到：</span>
					<a href="#"><img src="imgs/addFavorite.png" alt="" /></a>
				</div>
				<div id="tab">
					<div id="left_top">
						<h3>同类商品</h3>
						<ul>
							<li><a href="#">
								<img src="imgs/xiangqing_1.jpg"/>
								<span>神丹100枚油黄咸鸭蛋礼惠组</span>
								<i>￥299.00</i>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_2.jpg"/>
								<span>意峰森林原生态椴树雪蜜组</span>
								<i>￥258.00</i>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_3.jpg"/>
								<span>优利士福羊园全脂纯羊奶粉</span>
								<i>￥499.00</i>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_4.jpg"/>
								<span>法国卡斯顿百年老藤珍酿组</span>
								<i>￥378.00</i>
							</a></li>
						</ul>
					</div>
					<div id="left_bottom">
						<h3>您浏览过的商品</h3>
						<ul>
							<li><a href="#">
								<img src="imgs/xiangqing_1.jpg"/>
								<span>神丹100枚油黄咸鸭蛋礼惠组</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_2.jpg"/>
								<span>意峰森林原生态椴树雪蜜组</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_3.jpg"/>
								<span>优利士福羊园全脂纯羊奶粉</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_4.jpg"/>
								<span>法国卡斯顿百年老藤珍酿组</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_1.jpg"/>
								<span>神丹100枚油黄咸鸭蛋礼惠组</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_2.jpg"/>
								<span>意峰森林原生态椴树雪蜜组</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_3.jpg"/>
								<span>优利士福羊园全脂纯羊奶粉</span>
							</a></li>
							<li><a href="#">
								<img src="imgs/xiangqing_4.jpg"/>
								<span>法国卡斯顿百年老藤珍酿组</span>
							</a></li>
						</ul>
					</div>
					<div id="right_tab">
						<ul class="tab">
					        <li class="tab-item active">商品介绍</li>
					        <li class="tab-item">规格参数</li>
					        <li class="tab-item">支付/配送/退换货</li>
					        <li class="tab-item">商品评价(0)</li>
					    </ul>
					    <div class="products">
					        <div class="main selected" id="introduce">
					            <img src=""/>
					        </div>
					        <div class="main" id="detailed">
					            <img src=""/>
					        </div>
					        <div class="main">
					            <img src="imgs/微信图片_20181208163637.png"/>
					        	<p><a href="https://ab.alipay.com/i/yinhang.htm">支付宝支持的银行卡>></a></p>
					        	<img src="imgs/微信图片_20181208163642.png"/>
					        	<img src="imgs/微信图片_20181208163652.png"/>
					        	<img src="imgs/20140703110651_4887.jpg"/>
					        	<img src="imgs/微信图片_20181208163659.png"/>
					        </div>
					        <div class="main">
					            <img src="imgs/微信图片_20181208163702.png"/>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footer_add">
			<div class="footer_add_body">
				<div id="left">
					<dl>
						<img src="imgs/2.png" />
						<dt><b><a href="#">手机注册 一步搞定</a></b></dt>
						<dd>输入手机号-输入验证码-获取手机</dd>
						<dd>验证码-设定密码-完成注册</dd>
					</dl>
				</div>
				<div id="center">
					<dl>
						<img src="imgs/3.png" />
						<dt><b><a href="#">型录/电商/新媒体视频招商加盟</a></b></dt>
						<dd>柳小姐：0791-88110022-8126</dd>
					</dl>
				</div>
				<div id="right">
					
					<dl>
						<img src="imgs/4.png" />
						<dt><b><a href="#">在线客服</a></b></dt>
						<dd>24小时客服热线:</dd>
						<dd>4001-677-077</dd>
						
					</dl>
				</div>
			</div>
		</div>
		<div class="helpLink">
			<div class="helpLink_body">
				<div id="left">
					<dl>
						<a href="#"><img src="imgs/1 (1).jpeg" /></a>
						<dt><b><a href="#">关于风尚购物</a></b></dt>
						<dd>江西风尚电视购物股份有限公司于2009年9月28日正式成立，公司致力于现代家庭电视购物，是传媒和零售的完美组合。江西电视台风尚购物频道是经国家广电总局批准的全国性的、同时也是江西第一家真正的专业家庭电视购物频道。</dd>
						
					</dl>
				</div>
				<div id="right">
					<dl>
						<dt>帮助中心</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">使用订单状态说明</a></dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd><a href="#">免费配送区域</a></dd>
						<dd><a href="#">配送范围</a></dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd><a href="#">货到付款</a></dd>
						<dd><a href="#">银联支付</a></dd>
						<dd><a href="#">支付宝</a></dd>
						<dd><a href="#">微信支付</a></dd>
					</dl>
					<dl>
						<dt>客户服务</dt>
						<dd><a href="#">售后及退换货</a></dd>
						<dd><a href="#">在线客服</a></dd>
					</dl>
					<dl>
						<dt>会员中心</dt>
						<dd><a href="#">资料修改</a></dd>
						<dd><a href="#">找回密码</a></dd>
						<dd><a href="#">会员等级</a></dd>
						<dd><a href="#">会员权益</a></dd>
					</dl>
					<dl>
						<dt>招商专区</dt>
						<dd>关于我们</dd>
						<dd>合作流程</dd>
						<dd>联系我们</dd>
						<dd>供应商系统</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot_body">
				<p><a href="http://www.miibeian.gov.cn/" target="_blank">ICP经营许可证：赣ICP备15000001号</a></p>
				<ul>
					<li><img src="imgs/1 (2).jpeg"/></li>
					<li><img src="imgs/1 (6).jpeg"/></li>
					<li><img src=" imgs/1 (7).jpeg"/></li>
					<li><img src="imgs/1 (5).jpeg"/></li>
					<li><img src="imgs/1 (4).jpeg"/></li>
				</ul>
			</div>
		</div>
		<div class="end">
			
		</div>
		<div class="scroll">
			<ul>
				<li><span>
					购物车
					</span>
					<i>0</i>
				</li>
				<li>
					<span>
					我的消息
					</span>
					<i>0</i>
				</li>
				<li><span>
					微信公众号
				    </span>
				    <ul>
				    	<li><img src="imgs/QRCode.jpg"/></li>
				    </ul>
				</li>
			</ul>
		</div>
	</body>
</html>
<script>
//	*放大镜*
	//如果有display:none的元素,是无法直接获取高与宽,要 getStyle
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }
        return window.getComputedStyle(ele, null)[attr];
    }
//  
	var obig_box=document.getElementById("big_box");//大盒子
	var obig_box_max=document.getElementById("big_box_max");//放大镜盒子
	var oinner_box=document.getElementById("inner_box");//小盒子
	var img1=document.querySelector("#big_box img");//小照片
	var img2=document.querySelector("#big_box_max img");//大照片
//	
	 // 小区域=(小图/大图)*大区域
    var smImgW = img1.offsetWidth;
    var bigImgW = parseInt(getStyle(img2, "width"));
    var bigAreaW = parseInt(getStyle(obig_box_max, "width"));
    var smImgH = img1.offsetHeight;
    var bigImgH = parseInt(getStyle(img2, "height"));
    var bigAreaH = parseInt(getStyle(obig_box_max, "height"));

     oinner_box.style.width = (smImgW / bigImgW) * bigAreaW + "px";
     oinner_box.style.height = (smImgH / bigImgH) * bigAreaH + "px";

    //2.移动的比例  大图/小图   或 大区域/小区域
    var oScale = bigImgW / smImgW;
    var oCenter=document.querySelector(".center");
	obig_box.onmouseenter=function(evt){
		var e = evt ||window.event;
		//小盒子显示
		oinner_box.style.display="block";//小盒子显示
		obig_box_max.style.display="block";//大盒子显示
		document.onmousemove=function(evt){

            var e=evt||window.event;
			var disX=e.clientX-obig_box.offsetLeft-oinner_box.offsetWidth/2;
			var disY=e.clientY-obig_box.offsetTop-oCenter.offsetTop-oinner_box.offsetHeight/2+$(document).scrollTop();
			if(disX<=0){
				disX=0;
			}
			if(disX>=obig_box.offsetWidth- oinner_box.offsetWidth){
				disX=obig_box.offsetWidth- oinner_box.offsetWidth;
			}

			if(disY<=0){
				disY=0;
			}
			if(disY>=obig_box.offsetHeight- oinner_box.offsetHeight){
				disY=obig_box.offsetHeight- oinner_box.offsetHeight;
			}
			img2.style.left=- disX*oScale+"px"
			img2.style.top=- disY*oScale+"px"
			oinner_box.style.left=disX+"px";
			oinner_box.style.top=disY+"px";
		}
	}
	obig_box.onmouseleave=function(evt){
		oinner_box.style.display="none";
		obig_box_max.style.display="none";
	}

	$(function(){
        $("#right_tab").find(".tab-item").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(".products .main").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
        })
    })

	//按钮加减商品
	var ominus=document.getElementById("minus");//拿到减号的值
	var oplus=document.getElementById("plus");//拿到加号的值
	var onum=document.getElementById("info_button_num");//拿到input框
	ominus.onclick=function () {
	    //判断  如果等于1则不进行递减
		if (onum.value==1){
            onum.value==1;
            return false;
		}else {
            onum.value--;
		}
		return false;
    }
	oplus.onclick=function () {
		onum.value++;
        return false;
	}
	//放大镜处鼠标滑过换图片
	// var osmall_img=document.getElementById("small_img img");
	// var obig_box=document.getElementById("big_box img");
	// var obig_box_max=document.getElementById("big_box_max img");
	// osmall_img.onmouseenter=function () {
     //    obig_box.attr("src",osmall_img.src);
     //    obig_box_max.attr("src",osmall_img.src);
    // }
	 
</script>